<template>
     <ElForm ref="searchFormRef" :model="searchForm" inline class="search-form" label-width="68px" label-position="left">
            <ElFormItem label="数据状态" prop="status">
                <ElSelect
                    v-model="searchForm.status"
                    size="default"
                    clearable=""
                    placeholder="请选择"
                    @change="reset(false)"
                >
                    <ElOption
                        v-for="item in statusList"
                        :key="item.status"
                        :label="item.title"
                        :value="item.status"
                    ></ElOption>

                </ElSelect>
            </ElFormItem>
            <ElFormItem label="物探点号" prop="pointCode">
                <ElInput
                    v-model="searchForm.pointCode"
                    size="default"
                    placeholder="请输入"
                ></ElInput>
            </ElFormItem>

            <ElFormItem label="处理人" prop="userName">
                <ElInput
                    v-model="searchForm.userName"
                    size="default"
                    placeholder="请输入"
                ></ElInput>
            </ElFormItem>
            <ElFormItem label="道路" prop="roadId">
                <ElSelect
                    clearable=""
                    v-model="searchForm.roadId"
                    size="default"
                    filterable
                    placeholder="请选择"
                >
                    <ElOption
                        v-for="item in roadList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    ></ElOption>
                </ElSelect>
            </ElFormItem>

                <ElFormItem label="管线性质" prop="pipeType">
                    <DictSelect
                    size="default"
                    v-model="searchForm.pipeType"
                    clearable
                    :type="DictType.TYPE"
                    placeholder="请选择" />
                </ElFormItem>




            <ElFormItem>
                <ElButton
                    size="default"
                    color="#4371EE"
                    @click="reset(false)"
                >
                    查询
                </ElButton>
                <ElButton
                    size="default"
                    plain=""
                    @click="reset(true)"
                >
                    重置
                </ElButton>
            </ElFormItem>
        </elform>
            <!-- </ElCol> -->
            <div class="btns">
                <ElButton
                    v-show="showButton({ 1: 13, 2:  28}, 'Submit2Approve')"
                    :disabled="disableButton( 'Submit2Approve')"
                    class="add-btn"
                    plain
                    color="#4371EE"
                    size="default"
                    @click="e => handleProcess(e,'Submit2Approve')"
                >
                    提交审核
                </ElButton>
                <ElButton
                    v-show="showButton({ 1: 14, 2:  29}, 'Sendback')"
                    :disabled="disableButton( 'Sendback')"
                    plain
                    class="add-btn"
                    color="#4371EE"
                    size="default"
                    @click="e => handleProcess(e,'Sendback')"
                >
                    打回给测绘
                </ElButton>
                <ElButton
                    v-show="showButton({ 1: 15, 2:  30},  'Approve')"
                    :disabled="disableButton( 'Approve')"
                    plain
                    class="add-btn"
                    color="#4371EE"
                    size="default"
                    @click="e => handleProcess(e,'Approve')"
                >
                    审核通过
                </ElButton>
                <ElButton
                    v-show="showButton({ 1: 16, 2:  31}, 'CreateInspect')"
                    :disabled="disableButton( 'CreateInspect')"
                    plain
                    class="add-btn"
                    color="#4371EE"
                    size="default"
                    @click="e => handleProcess(e,'CreateInspect')"
                >
                    发起检测
                </ElButton>
                <ElButton
                    v-show="showButton({ 1: 17, 2:  32}, 'CreateDredge')"
                    :disabled="disableButton( 'CreateDredge')"
                    plain
                    class="add-btn"
                    color="#4371EE"
                    size="default"
                    @click="e => handleProcess(e,'CreateDredge')"
                >
                    发起清淤
                </ElButton>
                <ElButton
                    v-show="showButton({ 1: 18, 2:  33})"
                    :disabled="disableButton( 'RecheckOver')"
                    plain
                    class="add-btn"
                    color="#4371EE"
                    size="default"
                    @click="e => handleProcess(e,'RecheckOver')"
                >
                    复核完成
                </ElButton>
                <ElButton
                    v-show="showButton({ 1: 57, 2:  58})"
                   :disabled="disableButton( 'Delete')"
                   plain
                   class="add-btn"
                   color="#4371EE"
                   size="default"
                   @click="e => handleProcess(e,'Delete')"
                >
                删除数据
               </ElButton>
               <ElButton
                   v-show="showButton({ 1: 62, 2:  63})"
                   plain
                   class="add-btn"
                   color="#4371EE"
                   size="default"
                   :disabled="disableButton( 'GoAnalyse')"
                   @click="e => handleProcess(e,'GoAnalyse')"
               >
                   转判读
               </ElButton>
                <ElButton
                    v-show="showButton({ 1: 19, 2:  34})"
                    plain
                    class="add-btn"
                    color="#4371EE"
                    size="default"
                    @click="handleExport"
                >
                    导出数据
                </ElButton>
                <ElButton
                    v-show="showButton({ 1: 20, 2:  35})"
                    plain
                    class="add-btn"
                    color="#4371EE"
                    size="default"
                    @click="addShow = true; importText ='管线数据导入'; addForm.projectId=searchForm.projectId"
                >
                    测绘导入
                </ElButton>
                <ElButton
                    v-show="showButton({ 1: 21, 2:  36})"
                    plain
                    class="add-btn"
                    color="#4371EE"
                    size="default"
                    :disabled="disableButton( 'MakeComplete')"
                   @click="e => handleProcess(e,'MakeComplete')"
                >
                    标记为完成
                </ElButton>
                <!-- <ElButton
                    v-if="dataType === 1"
                    v-show="showButton({ 1: 13, 2:  28})"
                    plain
                    class="add-btn"
                    color="#4371EE"
                    size="default"
                    @click="addShow = true; importText ='判读导入'"
                >
                    判读导入
                </ElButton> -->

                <ElButton
                    v-show="showButton({ 1: 54, 2:  55})"
                    plain
                    class="add-btn"
                    color="#4371EE"
                    :icon="Plus"
                    size="default"
                    @click="addDataShow = true"

                >
                    创建数据
                </ElButton>
            </div>
            <ElTable
                border
                id="userTable"
                class="table"
                :data="tableData"
               :height="maxTableHeight"

               @cell-dblclick="doubleClick"
               :row-class-name="tableRowClassName"
               @selection-change="handleSelectionChange"
            >
                <ElTableColumn type="selection" width="55px" fixed="left" />
                <ElTableColumn v-for="(item,index) in tableColumn"
                    :formatter="item.formatter"
                    :showOverflowTooltip="item.showOverflowTooltip"
                 :key="index" :fixed ="item.fixed" :prop="item.field" :label="item.label" :width="item.width"
                 :tooltip-options ="{
                    trigger: 'click',
                    'popper-class': 'heelo',
                 }">
                    <template v-if="item.render" #default="scope">

                        <span >{{ item.render(scope.row) }}</span>
                    </template>
                </ElTableColumn>


                <ElTableColumn  fixed="right" label="操作" width="280">
                    <template #default="scope">
                        <ElButton
                        v-show="showButton({ 1: 25, 2:  40})"
                            link
                            type="text"
                            size="default"
                            @click="editFun(scope.row)"
                        >
                            编辑
                        </ElButton>
                        <ElButton
                        v-show="showButton({ 1: 22, 2:  37})"
                            link
                            type="text"
                            size="default"
                            @click="editFun(scope.row,true)"
                        >
                            写批注
                        </ElButton>
                        <ElButton
                        v-show="showButton({ 1: 24, 2:  39})"
                         link type="text" size="default" @click="goInspect(scope.row)">
                            检测数据
                        </ElButton>
                        <ElButton
                        v-show="showButton({ 1: 23, 2:  38})"
                         link type="text" size="default" @click="goDetail(scope.row)">
                            详情
                        </ElButton>

                    </template>
                </ElTableColumn>
            </ElTable>

            <ElPagination
                class="pagination"
                background
                layout="total,sizes,prev, pager, next,jumper"
                :total="total"
                :current-page="searchForm.pageNum"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="searchForm.pageSize"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />


             <!--新增或编辑角色-->
             <ElDialog   class="main-dialog" v-model="addDataShow"  :title="addData.id ? '编辑数据' : '创建数据'" width="580px">
                <div class="dialog-form">
                    <ElForm
                        ref="addDataRef"
                        :model="addData"
                        :rules="rules"
                        label-width="100px"
                        label-position="left"
                    >
                        <ElFormItem label="道路" prop="roadId">
                            <ElSelect
                                v-model="addData.roadId"
                                size="default"
                                filterable
                                placeholder="请选择"
                            >
                                <ElOption
                                    v-for="item in roadList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                                ></ElOption>
                            </ElSelect>
                        </ElFormItem>
                        <ElFormItem label="起始井编号" prop="beginCode">
                            <el-input v-model="addData.beginCode" size="default" placeholder="请输入"  />
                        </ElFormItem>
                        <ElFormItem label="终止井编号" prop="destCode">
                            <el-input v-model="addData.destCode" size="default" placeholder="请输入"  />
                        </ElFormItem>
                        <ElFormItem label="管线性质" prop="type">
                            <DictSelect
                                size="default"
                                v-model="addData.type"
                                clearable
                                :type="DictType.TYPE"
                                placeholder="请选择" />
                        </ElFormItem>
                        <ElFormItem label="起点埋深" prop="beginDeep">
                            <el-input v-model="addData.beginDeep" size="default" placeholder="请输入"  />
                        </ElFormItem>
                        <ElFormItem label="终点埋深" prop="destDeep">
                            <el-input v-model="addData.destDeep" size="default" placeholder="请输入"  />
                        </ElFormItem>
                        <ElFormItem label="起点管底高程" prop="beginBottomHigh">
                            <el-input v-model="addData.beginBottomHigh" size="default" placeholder="请输入"  />
                        </ElFormItem>
                        <ElFormItem label="终点管底高程" prop="destBottomHigh">
                            <el-input v-model="addData.destBottomHigh" size="default" placeholder="请输入"  />
                        </ElFormItem>
                        <ElFormItem label="管径" prop="diameter">
                            <el-input v-model="addData.diameter" size="default" placeholder="请输入"  />
                        </ElFormItem>
                        <ElFormItem label="管线长度" prop="length">
                            <el-input v-model="addData.length" size="default" placeholder="请输入"  />
                        </ElFormItem>
                        <ElFormItem label="材质" prop="pipeMaterial">
                            <DictSelect
                                size="default"
                                v-model="addData.pipeMaterial"
                                clearable
                                :type="DictType.PIPE_MATERIAL"
                                placeholder="请选择" />
                        </ElFormItem>
                        <ElFormItem label="流向" prop="direction">
                            <DictSelect
                                size="default"
                                v-model="addData.direction"
                                clearable
                                :type="DictType.DIRECTION"
                                placeholder="请选择" />
                        </ElFormItem>
                        <ElFormItem label="埋设类型" prop="buryType">
                            <DictSelect
                                size="default"
                                v-model="addData.buryType"
                                clearable
                                :type="DictType.BURY_TYPE"
                                placeholder="请选择" />
                        </ElFormItem>
                        <ElFormItem label="备注" prop="remark">
                            <el-input type="textarea" :rows="5" v-model="addData.remark" size="default" placeholder="请输入"  />
                        </ElFormItem>

                    </ElForm>
                </div>
                <template #footer>
                    <span  class="dialog-footer">
                        <ElButton size="default" @click="addDataShow = false">取 消</ElButton>
                        <ElButton color="#4371EE" size="default" @click="submitDataForm(addDataRef)">提 交</ElButton>
                    </span>
                </template>

            </ElDialog>

            <ElDialog   class="main-dialog" v-model="inspectShow"  title="管线检测数据" width="1000px">
                <div class="dialog-form">
                    <ElForm
                    ref="addFormRef"
                    label-width="110px"
                    label-position="left"
                    :model="inspectData.pipeLineInspect" >
                        <ElFormItem label="起始井编号：" prop="beginCode">
                            {{ inspectData.pipeLineInspect.beginCode }}
                        </ElFormItem>
                        <ElFormItem label="终止井编号：" prop="destCode">
                            {{ inspectData.pipeLineInspect.destCode }}
                        </ElFormItem>
                        <ElFormItem label="所属道路：" prop="destCode">
                            {{roadList.find( ({ id }) => id == inspectData.pipeLineInspect.roadId).name}}
                        </ElFormItem>
                        <ElFormItem label="起点埋深：" prop="beginDeep" :class="[diffInspect('beginDeep') ? 'red' : '']">

                            <ElInput  size="default" :disabled="!canEditInspect" v-model="inspectData.pipeLineInspect.beginDeep"></ElInput>
                        </ElFormItem>
                        <ElFormItem  label="终点埋深：" prop="destDeep" :class="[diffInspect('destDeep') ? 'red' : '']">

                           <ElInput  size="default" :disabled="!canEditInspect" v-model="inspectData.pipeLineInspect.destDeep"></ElInput>
                       </ElFormItem>

                       <ElFormItem label="管径：" prop="diameter" :class="[diffInspect('diameter') ? 'red' : '']">

                           <ElInput  size="default" :disabled="!canEditInspect" v-model="inspectData.pipeLineInspect.diameter"></ElInput>
                       </ElFormItem>
                       <ElFormItem label="管线长度：" prop="length" :class="[diffInspect('length') ? 'red' : '']">

                           <ElInput  size="default" :disabled="!canEditInspect" v-model="inspectData.pipeLineInspect.length"></ElInput>
                       </ElFormItem>
                       <ElFormItem label="材质：" prop="pipeMaterial" :class="[diffInspect('pipeMaterial') ? 'red' : '']">

                            <DictSelect
                            :disabled="!canEditInspect"
                            size="default"
                            v-model="inspectData.pipeLineInspect.pipeMaterial"
                            clearable
                            :type="DictType.PIPE_MATERIAL"
                            placeholder="请选择" />
                       </ElFormItem>
                       <ElFormItem label="流向：" prop="direction" :class="[diffInspect('direction') ? 'red' : '']">

                            <DictSelect
                            :disabled="!canEditInspect"
                            size="default"
                            v-model="inspectData.pipeLineInspect.direction"
                            clearable
                            :type="DictType.DIRECTION"
                            placeholder="请选择" />
                       </ElFormItem>

                        <ElFormItem label="拍摄类型：" prop="shootType" >
                            <DictSelect
                                :disabled="!canEditInspect"
                                size="default"
                                v-model="inspectData.pipeLineInspect.shootType"
                                clearable
                                :type="DictType.SHOOT_TYPE"
                                placeholder="请选择" />
                        </ElFormItem>
                        <!-- <ElFormItem label="检测方向：" prop="workDirection" >
                            <DictSelect
                                :disabled="!canEditInspect"
                                size="default"
                                v-model="inspectData.pipeLineInspect.workDirection"
                                clearable
                                :type="DictType.WORK_DIRECTION"
                                placeholder="请选择" />
                        </ElFormItem> -->
                       <ElFormItem label="备注：" prop="remark" >

                           <ElInput  size="default" :disabled="!canEditInspect" type="texarea" v-model="inspectData.pipeLineInspect.remark"></ElInput>
                       </ElFormItem>
                       <ElFormItem label="提交时间：" prop="updateTime" >

                           {{inspectData.pipeLineInspect.updateTime}}
                       </ElFormItem>


                        <ElFormItem label="缺陷列表："> </ElFormItem>
                    </ElForm>
                    <ElTable
                        border
                        class="table"
                        :data="inspectData.pipeLineInspect.flawList"
                        style="margin-top: 10px;"
                        max-height="250
                        "
                    >
                        <ElTableColumn prop="flawCode" label="缺陷">
                            <template #default="scope">
                                <div v-if="scope.row" style="display:flex;align-items: center">
                                    <!-- <ElInput :disabled="!canEditInspect"  v-model="scope.row.flawCode" placeholder="缺陷编码"></ElInput>
                                    -
                                    <ElInput :disabled="!canEditInspect"  v-model="scope.row.flawName" placeholder="缺陷名称"></ElInput> -->
                                    <DictSelect
                                    :disabled="!canEditInspect"
                                    size="default"
                                    v-model="scope.row.flawCode"
                                    clearable
                                    :foo="1"
                                    :type="DictType.FLAW_NAME"
                                    placeholder="请选择"
                                    @change="e =>{
                                        scope.row.flawName = flawListTranslate({},{} ,e);
                                        scope.row.flawLevel = null }"
                                     />
                                </div>

                            </template>
                        </ElTableColumn>
                        <ElTableColumn prop="flawLevel" label="缺陷等级" >
                            <template #default="scope">

                                <ElSelect
                                    v-model="scope.row.flawLevel"
                                    size="default"
                                    :disabled="!canEditInspect"
                                    placeholder="请选择"
                                    @change="reset(false)"
                                >
                                    <ElOption
                                        v-for="item in getCurrentFlawLevel(scope.row.flawCode)"
                                        :key="item"
                                        :label="item"
                                        :value="item"
                                    ></ElOption>

                                </ElSelect>
                            </template>
                        </ElTableColumn>
                        <ElTableColumn prop="direction" label="时钟方向" >
                            <template #default="scope">

                                <ElInput  size="default" :disabled="!canEditInspect"  v-model="scope.row.direction"></ElInput>
                            </template>
                        </ElTableColumn>
                        <ElTableColumn prop="distance" label="纵向距离" >
                            <template #default="scope">
                                <ElInput  size="default" :disabled="!canEditInspect"  v-model="scope.row.distance"></ElInput>
                            </template>
                        </ElTableColumn>
                        <ElTableColumn prop="distance" label="检测方向" >
                            <template #default="scope">
                                <DictSelect
                                :disabled="!canEditInspect"
                                size="default"
                                v-model="scope.row.workDirection"
                                clearable
                                :type="DictType.WORK_DIRECTION"
                                placeholder="请选择" />
                            </template>
                        </ElTableColumn>
                        <ElTableColumn prop="distance" label="视频条数" >
                            <template #default="scope">
                                <ElInput  size="default" :disabled="!canEditInspect"  v-model="scope.row.videoCount"></ElInput>
                            </template>
                        </ElTableColumn>

                        <ElTableColumn label="操作" width="100px">
                            <template #default="scope">
                                <ElButton
                                    link
                                    type="text"
                                    size="default"
                                    @click="inspectData.pipeLineInspect.flawList.splice(scope.$index, 1)"
                                >
                                    删除
                                </ElButton>
                            </template>
                        </ElTableColumn>


                    </ElTable>
                    <el-button type="primary" :disabled="!canEditInspect"  style="width: 100%" @click="onAddItem"
                        >添加</el-button
                    >

                </div>
                <template #footer >
                        <span  class="dialog-footer" >
                            <ElButton size="default" @click="inspectShow = false">取 消</ElButton>
                            <ElButton color="#4371EE" :disabled="!canEditInspect" size="default" @click="submitInspect">提 交</ElButton>
                        </span>
                    </template>

            </ElDialog>



            <!--新增或编辑角色-->
            <template v-if="addShow">
                <ElDialog v-model="addShow"  :title="importText" width="480px">
                <div class="dialog-form">
                    <ElForm
                        ref="addFormRef"
                        :model="addForm"
                        :rules="rules"
                        label-width="110px"
                        label-position="left"
                    >
                        <ElFormItem label="数据文件" prop="fileName">
                            <div class="uploader">
                                <div :class="[addForm.fileName ? '' : 'empty','btns']">
                                    {{ addForm.fileName ? addForm.fileName : '还未选择文件' }}
                                    <el-icon v-if="addForm.fileName"><CircleCheckFilled /></el-icon>
                                </div>
                                <Upload
                                            ref="uploader"
                                            :autoUpload="false"
                                            :limit="2"
                                            accept=".doc,.DOC,.docx,.DOCX,.pdf,.PDF,.csv,.excel,.xls,XLS,.XLSX,.xlsx,.CSV,.EXCEL"
                                            v-permission="8"
                                            class="upload-demo"
                                            :data="addForm"
                                            url="/ips/pipeline/importData"
                                            @fileChange="e => addForm.fileName = e"
                                            @success="handleUploadSuccess"
                                            @error="e => { loading.close()}"
                                        >
                                            <ElButton    link type="text" size="default" >
                                                选择文件
                                            </ElButton>
                                        </Upload>

                                </div>
                        </ElFormItem>


                        <ElFormItem label="所属道路" prop="roadId">
                                <ElSelect
                                v-model="addForm.roadId"
                                size="default"
                                filterable
                                placeholder="请选择"
                                >
                                <ElOption
                                    v-for="item in roadList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                                ></ElOption>
                            </ElSelect>
                        </ElFormItem>
                    </ElForm>
                </div>
                <template #footer>
                    <span  class="dialog-footer">
                        <ElButton size="default" @click="addShow = false">取 消</ElButton>
                        <ElButton color="#4371EE" size="default" @click="submitForm(addFormRef)">提 交</ElButton>
                    </span>
                </template>

            </ElDialog>
            </template>


            <ElDialog   class="main-dialog" v-model="addTest"  title="发起检测" width="480px">
                <div class="dialog-form">
                    <ElForm
                        ref="addTestRef"
                        :model="addTestUser"
                        label-width="80px"
                        label-position="left"
                    >

                        <ElFormItem label="检测人" :rules="{ required: true, message: '请选择人员', trigger: 'change' }">
                            <ElSelect
                                v-model="addTestUser.user"
                                value-key="userId"
                                size="default"
                                placeholder="请选择"
                            >
                            <ElOption
                                v-for="item in allUserList"
                                :key="item.userId"
                                :label="`${item.realName}(${item.belongRole})`"
                                :value="item"
                            ></ElOption>


                            </ElSelect>
                        </ElFormItem>
                    </ElForm>
                </div>
                <template #footer>
                    <span  class="dialog-footer">
                        <ElButton size="default" @click="addTest = false">取 消</ElButton>
                        <ElButton color="#4371EE" size="default" @click="submitTest(addTestRef,'CreateInspect')">提 交</ElButton>
                    </span>
                </template>

            </ElDialog>
            <ElDialog   class="main-dialog" v-model="addClean"  title="发起清淤" width="480px">
                <div class="dialog-form">
                    <ElForm
                        ref="addCleanRef"
                        :model="addTestUser"
                        label-width="80px"
                        label-position="left"
                    >

                    <ElFormItem label="清淤人" :rules="{ required: true, message: '请选择人员', trigger: 'change' }">
                            <ElSelect
                                v-model="addTestUser.user"
                                value-key="userId"
                                size="default"
                                placeholder="请选择"
                            >
                            <ElOption
                                v-for="item in allUserList"
                                :key="item.userId"
                                :label="`${item.realName}(${item.belongRole})`"
                                :value="item"
                            ></ElOption>


                            </ElSelect>
                        </ElFormItem>
                    </ElForm>
                </div>
                <template #footer>
                    <span  class="dialog-footer">
                        <ElButton size="default" @click="addClean = false">取 消</ElButton>
                        <ElButton color="#4371EE" size="default" @click="submitTest(addCleanRef,'CreateDredge')">提 交</ElButton>
                    </span>
                </template>

            </ElDialog>

            <ElDialog   class="main-dialog" v-model="addRemark"  title="写批注" width="480px">
                <div class="dialog-form">
                    <ElForm
                        ref="addRemarkRef"
                        :model="addData"
                        :rules="rules"
                        label-width="60x"
                        label-position="left"
                    >

                        <ElFormItem label="批注">
                            <ElInput

                                v-model="addData.shortRemark"
                                type="textarea"
                                :row="7"
                                size="default"
                                placeholder="请输入"
                            >
                            </ElInput>
                        </ElFormItem>
                    </ElForm>
                </div>
                <template #footer>
                    <span  class="dialog-footer">
                        <ElButton size="default" @click="addRemark = false">取 消</ElButton>
                        <ElButton color="#4371EE" size="default" @click="submitDataForm(addRemarkRef)">提 交</ElButton>
                    </span>
                </template>

            </ElDialog>


            <ElDialog   class="main-dialog" v-model="detailShow"  title="数据详情" width="720px">
                <div class="dialog-form">
                    <ul class="details">
                        <li class="details-item"><label>起始井编号：</label> {{ details.beginCode }} </li>
                        <li class="details-item"><label>终止井编号：</label> {{ details.destCode }}</li>

                        <li class="details-item"><label>所属道路：</label> {{roadList.find( ({ id }) => id == details.roadId).name}}</li>
                        <li class="details-item"><label>管线性质：</label> {{ typeTranslate({},{} ,details.type) }}</li>
                        <li class="details-item"><label>数据状态：</label> {{ statusList.find( ({ status }) => status == details.status).title}} </li>
                        <li class="details-item"><label>当前处理人：</label> {{ details.userName }}</li>
                        <li class="details-item"><label>初始导入时间：</label> {{ details.createTime }}</li>
                        <li class="details-item"><label>最后处理时间：</label> {{ details.updateTime }}</li>

                        <li class="details-item"><label>处理记录：</label> </li>
                    </ul>
                    <ElTable
                        border
                        class="table"
                        :data="details.processLogs"
                        style="margin-top: 10px;"
                    >
                        <ElTableColumn prop="createTime" label="时间" width="150" />
                        <ElTableColumn prop="processStatus" label="状态" >
                        </ElTableColumn>
                        <ElTableColumn prop="processName" label="操作名" />
                        <ElTableColumn prop="processUserName" label="操作人" />
                        <ElTableColumn prop="remark" label="批注" width="200px">
                            <template #default="scope">
                                {{scope.row.remark}}
                                <template v-if="scope.row.photoUrl">
                                    <el-button type="text" @click="handleviewer(scope.row.photoUrl)">查看图片</el-button>
                                </template>
                            </template>
                        </ElTableColumn>
                    </ElTable>

                </div>

            </ElDialog>
            <ElImageViewer v-if="showViewer" :initialIndex="initialIndex" @close="e => showViewer = false" :urlList="urlList" />
</template>

<script setup lang="ts">
import { DictType } from '@/components/DictSelect/localDictDefine';
import useTableSetting from '@/hooks/useTableSetting';
import { ref, onMounted, reactive, nextTick, computed, watch, toRefs } from 'vue';

import { ElMessage, ElTree, FormInstance, ElMessageBox, ElLoading } from 'element-plus';
import { useMenuStore } from '@/store/app';
import { getFlatDeepTreeData, exportFromUrl } from '@/utils/common';
import { Search, Plus, CircleCheckFilled, MessageBox, Message, Phone } from '@element-plus/icons-vue';
import { validateForm } from '@/helper/index';
import { getPipelineData, getPipelineDetail, getRoadList, userList, createPipeline, batchUpadatePipeline, getLoginUserProjects, getUserDataStatus, getStatusActionMaps, pipelineProcess,getCombDetail, saveLineData, getFlawLevel, exportPipetData} from '@/api/index';
import useDictData from '@/components/DictSelect/useDictData';

const props = defineProps<{
    dataType: number,
    statusList: []
}>();

const flawLevelOps = ref([])

const handleGetFlawLevel = async() => {
    flawLevelOps.value = await getFlawLevel()
}

handleGetFlawLevel()


const getCurrentFlawLevel = computed(() => {
    return (flawCode) => {
        const target = flawLevelOps.value.find(item => item.key.includes(flawCode) )
        if(target) {
            return target.value.split(',').map(key => +key)
        }
        return []
    }
})

const { dataType, statusList} = toRefs(props);

const { maxTableHeight, setTableMaxHeight } = useTableSetting({ id: 'userTable', offsetBottom: 92 });

const setTable = () => {
    maxTableHeight.value = setTableMaxHeight('userTable', 92);
};
const searchForm = reactive({

    'pipeType': '',
    'pointCode': '',
    'projectId': '',
    'roadId': '',
    'status': '',
    'userName': '',
    pageNum: 1,
    pageSize: 20,
});

const addRemarkRef = ref(null);
const { tableDictFilter: typeTranslate } = useDictData({
    type: DictType.TYPE,
});

const { tableDictFilter: pipeTranslate } = useDictData({
    type: DictType.PIPE_MATERIAL,
});
const { tableDictFilter: derectionTranslate } = useDictData({
    type: DictType.DIRECTION,
});
const { tableDictFilter: buryTranslate } = useDictData({
    type: DictType.BURY_TYPE,
});

const { tableDictFilter: shootTypeTranslate } = useDictData({
    type: DictType.SHOOT_TYPE,
});
const { tableDictFilter: flawListTranslate } = useDictData({
    type: DictType.FLAW_NAME,
});

const { tableDictFilter: workDirectionTranslate } = useDictData({
    type: DictType.WORK_DIRECTION,
});

const addTestUser = reactive({
    user: {}
});

const activeProject = ref('first');



const allUserList = ref([]);

const getAllUserList = async () => {
    const res = await userList( { pageNum: 1, pageSize: 10000});
    allUserList.value = res.list;
};

getAllUserList();



const store = useMenuStore();



const roadList= ref([]);



const multipleSelection = ref([]);

const handleSelectionChange = (val: User[]) => {
    multipleSelection.value = val;
};

const handleMultiple = async (e, processName ) => {
    if(!multipleSelection.value.length) {
        ElMessage.error('请选择数据');
        return Promise.reject();
    }
    if(processName == 'CreateInspect'||  processName == 'CreateDredge') {
        if(searchForm.status == 21 || searchForm.status == 31) {
            const str = searchForm.status == 21 ? '检测中' : '清淤中'
            await ElMessageBox.confirm(`选所数据正在${str}，重新分配会导致已完成的外业数据归零，是否确认要操作？`, '提示', {
                confirmButtonText: '确  定',
                cancelButtonText: '取  消',
                dangerouslyUseHTMLString: true
            });
        }

    } else  {
        await ElMessageBox.confirm(`确认要将选中的 <span style="color:#FB3B3F;">${multipleSelection.value.length}</span> 条数据${e.target.innerText}吗？`, e.target.innerText, {
            confirmButtonText: '确  定',
            cancelButtonText: '取  消',
            dangerouslyUseHTMLString: true
        });
    }

};



const tableColumn = computed(() => {
    const temp_1 = [
        { label: '物探点号', field: 'code', width: '120px'},
        { label: '数据状态', field: 'status', width: '80px',render: (row) => statusList.value.find( ({ status }) => status == row.status).title },
        { label: '处理人', field: 'userName', width: '80px'},
        { label: '管线性质', field: 'type', width: '140px', formatter: typeTranslate},
        { label: '特征', field: 'feature', width: '140px', edit: true,fixed: false},
        { label: '附属物', field: 'fsw', width: '140px', edit: true,fixed: false},
        { label: '井底深', field: 'jds', width: '140px', edit: true,fixed: false},
        { label: '水深', field: 'ss', width: '140px', edit: true,fixed: false},
        { label: '淤泥深', field: 'yns', width: '140px', edit: true,fixed: false},
        { label: '井盖状态', field: 'jgzt', width: '140px', edit: true,fixed: false},
        { label: '井盖材质', field: 'jgcz', width: '140px', edit: true,fixed: false},
        { label: '备注', field: 'remark', width: '250px', edit: true,fixed: false, showOverflowTooltip: true},

    ];
    const temp_2 = [
        { label: '道路', field: 'roadId', width: '120px',
            render: (row) => roadList.value.find( ({ id }) => id == row.roadId).name },
        { label: '起始井编号', field: 'beginCode', width: '120px' },
        { label: '终止井编号', field: 'destCode', width: '120px' },
        { label: '数据状态', field: 'status', width: '80px',render: (row) => statusList.value.find( ({ status }) => status == row.status).title },
        { label: '处理人', field: 'userName', width: '80px',},
        { label: '管线性质', field: 'type', width: '140px', formatter: typeTranslate},
        { label: '起点埋深', field: 'beginDeep', width: '140px', edit: true},
        { label: '终点埋深', field: 'destDeep', width: '140px', edit: true},
        { label: '起点管底高程', field: 'beginBottomHigh', width: '140px', edit: true},
        { label: '终点管底高程', field: 'destBottomHigh', width: '140px', edit: true},
        { label: '管线长度', field: 'length', width: '140px', edit: true},
        { label: '管径', field: 'diameter', width: '140px', edit: true},
        { label: '材质', field: 'pipeMaterial', width: '140px',formatter: pipeTranslate, edit: true},
        { label: '流向', field: 'direction', width: '140px', formatter: derectionTranslate,edit: true},
        { label: '埋设类型', field: 'buryType', width: '140px', formatter: buryTranslate, edit: true},
        { label: '备注', field: 'remark', width: '250px', edit: true, showOverflowTooltip: true},

    ];


    return dataType.value === 1 ? temp_1 : temp_2;
});

const doubleClick = (row, column, cell) => {
    console.log(row,column, cell);
    row[column.property+'Show'] = true;
    setTimeout(() => {
        inputRefMap.value[`Input_Ref_${column.property}_${row.id}`].input.focus();
    },100);

};

const tableRowClassName = ({row, rowIndex}) => {
    if(row.inspectDiff > 0) {
        return 'error-row';
    }
    return '';
};
const inputRefMap = ref({});

/** 动态设置Input Ref */
const handleSetInputMap = (el: refItem, key: number, id) => {
    if (el) {
        inputRefMap.value[`Input_Ref_${key}_${id}`] = el;
    }
};


const tableData: any = ref([
]);
const addRemark = ref<boolean>(false);
const addShow = ref<boolean>(false);
const addTest = ref<boolean>(false);
const addClean = ref<boolean>(false);
const total = ref<number>(0);
const isEdit = ref<boolean>(false);
const showRoot = ref<boolean>(false);
const currentRole: any = ref('');
const addFormRef = ref<FormInstance>(null);
const searchFormRef = ref<FormInstance>(null);

const addTestRef= ref<FormInstance>(null);
const addCleanRef= ref<FormInstance>(null);



const addForm = reactive<addRoleType>({
    roadId: '',
    projectId: '',
    fileName:''
});

const rules = reactive({
    fileName: [{ required: true, message: '请选择数据文件', trigger: 'blur' }],
    roadId: [{ required: true, message: '请选择道路', trigger: 'blur' }],
});


const getList = async () => {
    try {
        const res: any = await getPipelineData(searchForm);
        tableData.value = res.list;
        total.value = res.total;
    } catch (err) {}
};



const reset = (reset) => {
    if(reset) {
        searchFormRef.value.resetFields();
        searchForm.status = statusList.value[0].status;
    }
    searchForm.pageNum = 1;
    getList();
};

const handleSizeChange = (rows: number) => {
    searchForm.pageNum = 1;
    searchForm.pageSize = rows;
    getList();
};
const handleCurrentChange = (page: number) => {
    searchForm.pageNum = page;
    getList();
};






const detailShow = ref(false);
const details = ref(
    {
        id: 1,
        code: 'xc-001',
        name: '测试项目',
        unit: '单位名称',
        date: '2023-09-10',
        user: '张三',
        kaigong: '2023-09-10',
        phone: '1277001122',
        status: 1,
    }
);

const goDetail = async (row) => {
    details.value = await getPipelineDetail({ lineId: row.id});
    detailShow.value = true;

};

const inspectShow = ref(false);
const inspectData = reactive({
    pipeLine: null,
    pipeLineInspect: null
});

const goInspect = async (row) => {
    const {pipeLine, pipeLineInspect } = await getCombDetail({ lineId: row.id});
    if(!pipeLineInspect) {
        return ElMessage.error('没有检测数据！');
    }
    inspectData.pipeLine = pipeLine;
    inspectData.pipeLineInspect = pipeLineInspect;
    inspectShow.value = true;
    // detailShow.value = true;

};



const handleFileChange = (file,field) => {
    addForm[field] = file.name;
};

const resetForm = (form) => {
    Object.keys(form).forEach(key => form[key] = '');
};

const addDataShow = ref(false);
const addDataRef = ref(null);
const addData = reactive({
    id: '',
    'beginBottomHigh': '',
    'beginCode': '',
    'beginDeep': '',
    'buryType': '',
    'destBottomHigh': '',
    'destCode': '',
    'destDeep': '',
    'diameter': '',
    'direction': '',
    'length': '',
    'pipeMaterial': '',
    'projectId': '',
    'remark': '',
    'roadId': '',
    'type': '',
    shortRemark: ''
});

const editFun = async (row: any, isAddRemark = false) => {
    if(isAddRemark) {
        addRemark.value= true;
    } else {
        addDataShow.value = true;
    }
    Object.keys(row).forEach(key => {
        if(key in addData) {
            addData[key] = row[key];
        }
    });


};


const submitDataForm = async (formEl: FormInstance | undefined) => {
    await validateForm(formEl);
    const params = {
        ...addData,
        projectId: searchForm.projectId
    };
    addData.id ? await batchUpadatePipeline([params]) : await createPipeline(params);
    ElMessage.success('提交成功！');
    addDataShow.value = false;
    addRemark.value = false;
    getList();
};

watch(
    addDataShow,
    val => {
        if(!val) {
            addDataRef.value.clearValidate();
            resetForm(addData);
        }
    }
);



const statusMap = ref({});
const canEditInspect = computed ( () => {
    const authObj = {
        1: 59,
        2: 60
    }
    const targeKey = authObj[dataType.value];
    return store.buttonList.some(({ id }) => id == targeKey);
});

const showButton = computed (() => (authObj, key) => {
    const targeKey = authObj[dataType.value];
    return store.buttonList.some(({ id }) => id == targeKey);
});
const diffInspect = computed (() => ( key) => {
    const { pipeLineInspect, pipeLine} = inspectData;
    return pipeLineInspect[key] != pipeLine[key];
});

const disableButton = computed (() => key =>
    !(statusMap.value[searchForm.status] && statusMap.value[searchForm.status].includes(key))
);



const getStatusMap = async () => {
    statusMap.value = await getStatusActionMaps();

};
getStatusMap();


const handleProcess = async (e, processName) => {
    await handleMultiple(e, processName);
    if(processName === 'CreateInspect') {
        addTest.value = true;
        return;
    }
    if(processName === 'CreateDredge') {
        addClean.value = true;
        return;
    }
    const params = {
        idList: multipleSelection.value.map(({id}) => id),
        processName
    };
    let loading = ElLoading.service({ text: '处理中...'})
    try {
        await pipelineProcess(params);
        ElMessage.success(e.target.innerText + '成功！');
        multipleSelection.value = [];
        getList();
    } finally {
        loading.close()
    }

};


const handleProcess2 = async (processName) => {

    const params = {
        idList: multipleSelection.value.map(({id}) => id),
        processName,
        nextUserId: addTestUser.user.userId,
        nextUserName: addTestUser.user.realName,

    };
    await pipelineProcess(params);
    ElMessage.success('操作成功！');
    multipleSelection.value = [];
    getList();
};



const submitTest = async (form, key) => {
    await validateForm(form);
    await handleProcess2(key);
    addTest.value = false;
    addClean.value = false;
    addTestUser.user = {};
};

const getRoad = async () => {
    const res: any = await getRoadList({ pageNum: 1, pageSize: 10000, projectId: searchForm.projectId});
    roadList.value = res.list;
};



const tabClick = () => {
    getRoad();
    searchForm.roadId = null;
    reset(true);
};


const initialIndex = ref(0)
const showViewer = ref(false)
const urlList = ref([])
const handleviewer = (urlLister) => {
    const urls = urlLister.split(',')
    urlList.value = urls
    showViewer.value = true;
}


const uploader = ref(null)

let loading = null


const submitForm = async (formEl: FormInstance | undefined) => {
    await validateForm(formEl)
    loading = ElLoading.service({ text: '导入中...'})
    await uploader.value?.submit()

  //  await validateForm(formEl);
//   const params = {
//     roadId: addForm.roadId,
//     projectId:searchForm.projectId
//   }
};

const handleUploadSuccess = (name, data) => {
    ElMessage.success(`成功导入${data}条数据`)
    loading.close()
    addShow.value = false;
    getList()
}


const submitInspect = async (formEl: FormInstance | undefined) => {
    await saveLineData(inspectData.pipeLineInspect)
    inspectShow.value = false;
    ElMessage.success('提交成功！');
    getList();
};

const onAddItem = async () => {
    if(!inspectData.pipeLineInspect.flawList) {
        inspectData.pipeLineInspect.flawList = [ {
            direction : null,
            flawCode : null,
            flawLevel : null,
            flawName : null,
            distance : null,
            workDirection:null,
            videoCount:null
        }]
    }else {
        inspectData.pipeLineInspect.flawList.push({
            direction : null,
            flawCode : null,
            flawLevel : null,
            flawName : null,
            distance : null,
            workDirection:null,
            videoCount:null
        })
    }
};




const handleExport = async() => {
    let params = {};
    let msg = ''
    if(multipleSelection.value.length) {
        params.ids = multipleSelection.value.map(({id}) => id);
        msg = '是否导出选中的数据'
    }else {
        params = {
            ...searchForm
        }
        msg = '是否导出当前页数据?'
    }
    await ElMessageBox.confirm(msg, '提示', {
        confirmButtonText: '确  定',
        cancelButtonText: '取  消',
    });
    let loading = ElLoading.service({
        lock: true,
        text: '处理中...',
    });
    try {
        const url = await exportPipetData(params)
        await exportFromUrl(url)
        getList()
    } finally {
        loading.close()
    }
}




watch(
    addShow,
    val => {
        if(!val) {
            resetForm(addForm);
        }
    }
);

defineExpose({
    setTable,
    tabClick,
    searchForm,
    getRoad,
    getList,
    reset
});

</script>

<style scoped lang="scss">
.details{
    display: flex;
    align-items: center;
    flex-flow: wrap;
    .details-item{

        margin-top: 10px;
        width: 50%;

    }
}
.uploader{
    width: 100%;
    display: flex;
    align-items: center;
    .btns{
        padding: 0 10px;
        margin-right: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color:#1B1B1E;
        height: 32px;
        border: 1px solid #DCDCDC;
        border-radius: 3px;
        flex: 1;
        &.empty{
            color:#91949F
        }
        .el-icon{
            color:#2EB68D;
        }
    }
}
.main-content > .btns{
    margin:10px 0 20px;
}
.search-form{
   ::v-deep(){
    .el-input,.el-select{
        width: 265px !important;
    }
   }
}
.data-type {
    padding: 5px 0 20px;
    display: flex;
    .tab-button{
        cursor: pointer;
        padding: 8px 15px;
        background: #E4E5EA;
        border-radius: 3px;
        &.active{
            color: #4371EE;
            background: #D9E3FC;
        }
        & + .tab-button{
            margin-left: 20px;
        }
    }
}
::v-deep(.el-popper){
    max-width: 400px;
}
.red ::v-deep(.el-input__inner){
    color:red;
}
.el-dialog .el-button--text{
    padding: 0;
}
</style>
